<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content [id*='input'] {
            width: 40px;
            height: 40px;
            outline: none;
            border: 2px solid gray;
            font-size: 33px;
            /*color: transparent;*/
            /*text-shadow: 0 0 0 black;*/
            border-radius: 8px;
            box-sizing: border-box;
            padding-left: 8px;
        }
    </style>
</head>
<body>
<form class="content">
    <input type="text" name="code1" id="input1" maxlength="1">
    <input type="text" name="code1" id="input2" maxlength="1">
    <input type="text" name="code1" id="input3" maxlength="1">
    <input type="text" name="code1" id="input4" maxlength="1">
    <input type="text" name="code1" id="input5" maxlength="1">
    <input type="text" name="code1" id="input6" maxlength="1">
</form>

<script>
    
    
    /*
        一个验证码框框
     */
    
    const contentDom = document.querySelector('.content')
    const arrayDom = Array.from(contentDom.children)
    arrayDom.forEach(item => {
        item.addEventListener('keyup', tabForward)
    })

    function tabForward(event) {
        let target = event.target;
        // 如果到达最大的长度
        if (target.value.length === target.maxLength) {
            let form = target.form;
            console.log('form',form)
            let len = form.elements.length;
            for (let i = 0; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i + 1]) {
                        form.elements[i + 1].value=''
                        form.elements[i + 1].focus();
                    }
                    return;
                }
            }
        }
    }

</script>
</body>
</html>